import * as React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
  Image,
} from 'react-native';
import { TouchableHighlight, TouchableWithoutFeedback } from 'react-native-gesture-handler';

import { Button } from 'react-native-elements';
import Icon from 'react-native-vector-icons/FontAwesome';

import API from '../../api/index'
import BText from '../../baseUI/b-text';
import router from '../../util/router'

export default class  Rank extends React.Component {
  state = {
    uList: []
  }

  componentDidMount() {
    API.rankList().then(res => {
      this.setState({
        uList: res.data.list
      })
    })
  }

  render() {
    return (
      <SafeAreaView style={{ flex: 1 }}>
        <ScrollView>
          <View style={{
            paddingTop: 10
          }}>
            {
              this.state.uList.map((item, key) => {
                return (
                  <View key={key} style={{
                    display: 'flex',
                    flexDirection: 'row',
                    marginBottom: 10,
                  }}>
                    <View style={{
                      marginHorizontal: 10,
                      width: 26,
                      height: 26,
                      display: 'flex',
                      alignItems: 'center',
                      justifyContent: 'center',
                      backgroundColor: '#faebd7',
                      borderRadius: 4
                    }}>
                      <Text style={{ fontStyle: 'italic', fontSize: 14 }}>{key + 1}</Text>
                    </View>
                    <View style={{
                      flex: 1,
                      backgroundColor: '#fff',
                      marginRight: 10,
                      borderRadius: 4,
                      display: 'flex',
                      flexDirection: 'row',
                      alignItems: 'flex-start',
                      paddingTop: 10,
                      paddingBottom: 8
                    }}>
                      <TouchableWithoutFeedback onPress={() => {
                        router.goUserProfile({ 
                          navigation: this.props.navigation,
                          userId: item.id,
                          title: item.nickname
                        })
                      }}>
                        <Image source={{ uri: item.avatar }} style={{
                          width: 45,
                          height: 45,
                          borderRadius: 22.5,
                          marginLeft: 10,
                          marginRight: 10,
                        }}></Image>
                      </TouchableWithoutFeedback>
                      <View style={{ display: 'flex', flex: 1 }}>
                        <Text numberOfLines={0} style={{ fontSize: 16 }}>{item.nickname}</Text>
                        <BText type="gray" numberOfLines={0} style={{ lineHeight: 18 , marginTop: 6 }}>{item.words || '这个人很懒什么也没说'}</BText>
                        <BText type="gray" style={{ marginTop: 2 }}>成就：{item.nickname}</BText>
                      </View>
                      <TouchableHighlight style={{ marginRight: 10 }}>
                        <View style={{ paddingHorizontal: 6, borderColor: '#ddd', borderRadius: 2, borderWidth: 1 }}>
                          <TouchableWithoutFeedback
                          onPress={() => {
                            router.goChatItem({ 
                              navigation: this.props.navigation,
                              title: item.nickname,
                              nickname: item.nickname,
                              userId: item.id
                            })
                          }}
                          >
                          <BText style={{ color: '#999' }} >向他咨询</BText>
                          </TouchableWithoutFeedback>
                        </View>
                      </TouchableHighlight>
                    </View>
                  </View>
                )
              })
            }
          </View>
        </ScrollView>
      </SafeAreaView>
    );
  }
}